/**
 * create by cyw 2020-5-26
 * 首页分类导航栏
 */
import "./Category.scss";

import React from 'react'


import { getHeaderData } from '../../action/categoryAction'

import { connect } from 'react-redux'

class Category extends React.Component {
    constructor(props) {
        super(props);
        this.fetchData();
    }
    fetchData() {
        this.props.dispatch(getHeaderData())
    }

    goCategory() {
        window.location.href = './category.html';
    }

    renderItems() {
        let items = this.props.items
        items = items.splice(0, 8);
        return items.map((item) => {
            return <div key={item.code} className="category-item" onClick={this.goCategory}>
                <img src={item.url} className="item-icon" />
                <p className="item-name">{item.name}</p>
            </div>
        })
    }

    render() {
        return (
            <div className="category-content clearfix">{this.renderItems()}</div>
        );
    }
}
export default connect(
    state => ({
        items: state.categoryReducer.items
    })
)(Category);